import { FC } from 'react';
import QuestionInputConf, { QuestionInputPropsType } from './QuestionInput';
import QuestionTitleConf, { QuestionTitlePropsType } from './QuestionTitle';
import QuestionParagraphConf, {
  QuestionParagraphPropsType,
} from './QuestionParagraph';
import QuestionInfoConf, { QuestionInfoPropsType } from './QuestionInfo';
import QuestionTextareaConf, {
  QuestionTextareaPropsType,
} from './QuestionTextarea';
import QuestionRadioConf, {
  QuestionRadioPropsType,
  QuestionRadioStatPropsType,
} from './QuestionRadio';
import QuestionCheckboxConf, {
  QuestionCheckboxPropsType,
  QuestionCheckboxStatPropsType,
} from './QuestionCheckbox';

export type ComponentPropsType = QuestionInputPropsType &
  QuestionTitlePropsType &
  QuestionParagraphPropsType &
  QuestionInfoPropsType &
  QuestionTextareaPropsType &
  QuestionRadioPropsType &
  QuestionCheckboxPropsType;

type ComponentStatPropsType = QuestionRadioStatPropsType &
  QuestionCheckboxStatPropsType;

export type ComponentConfType = {
  title: string;
  type: string;
  Component: FC<ComponentPropsType>;
  PropComponent: FC<ComponentPropsType>;
  defaultProps: ComponentPropsType;
  StatComponent?: FC<ComponentStatPropsType>;
};

const componentConfList: ComponentConfType[] = [
  QuestionInputConf,
  QuestionTitleConf,
  QuestionParagraphConf,
  QuestionInfoConf,
  QuestionTextareaConf,
  QuestionRadioConf,
  QuestionCheckboxConf,
];

export const componentConfGroup = [
  {
    groupId: 'text',
    groupName: '文本显示',
    list: [QuestionTitleConf],
  },
  {
    groupId: 'input',
    groupName: '用户输入',
    list: [QuestionInputConf],
  },
  {
    groupId: 'paragraph',
    groupName: '段落',
    list: [QuestionParagraphConf],
  },
  {
    groupId: 'info',
    groupName: '问卷信息',
    list: [QuestionInfoConf],
  },
  {
    groupId: 'textarea',
    groupName: '文本域',
    list: [QuestionTextareaConf],
  },
  {
    groupId: 'radio',
    groupName: '单选',
    list: [QuestionRadioConf],
  },
  {
    groupId: 'checkbox',
    groupName: '多选',
    list: [QuestionCheckboxConf],
  },
];

export const getComponentConfByType = (type: string) => {
  return componentConfList.find((conf) => conf.type === type);
};
